<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <el-row :gutter="20">
          <el-col :span="1">
            <el-tag>模板</el-tag>
          </el-col>
          <el-col :span="10">
            <el-select
              size="mini"
              :style="{ width: '100%' }"
              v-model="statementTemplateId"
              filterable
              placeholder="请选择要导出的文件模板"
            >
              <el-option
                v-for="(item, value) in statementSource.statementTemplateMap"
                :key="value"
                :label="item"
                :value="value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1">
            <el-button
              type="primary"
              size="mini"
              @click="exportStatementDataFile"
              >导出</el-button
            >
          </el-col>
          <el-col :span="9">
            <span
              v-for="(item, value) in abroadSearchStorageList"
              :key="value"
              class="margin-left-sm"
            >
              <el-button size="mini" plain @click="selectDepart(item)">
                {{ item }}
              </el-button>
              <i
                class="el-icon-close text-xl text-red"
                v-if="booClose"
                @click="closePop(item)"
              ></i>
            </span>
          </el-col>
          <el-button-group>
            <el-button type="primary" size="mini" @click="addPop"
              >保存搜索</el-button
            >
            <el-button type="primary" size="mini" @click="showCloseButton"
              >整理搜索</el-button
            >
          </el-button-group>
        </el-row>
      </div>
      <!--运单查询条件-->
      <AbroadWaybillReportQuery
        ref="waybillForm"
        :statementSource="statementSource"
      ></AbroadWaybillReportQuery>
      <el-divider></el-divider>
      <!--应收应付的查询条件-->
      <receiveOrPayQuery
        ref="receiveOrPayForm"
        :statementSource="statementSource"
      ></receiveOrPayQuery>
      <el-divider></el-divider>
      <!--记账的查询条件-->
      <financeAccountQuery
        ref="financeAccountForm"
        :statementSource="statementSource"
      ></financeAccountQuery>
    </el-card>
    <el-dialog width="20%" title="保存搜索模板" :visible.sync="dialogVisible">
      <span>模板名称</span>
      <el-input :rows="20" v-model="templateName"> </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveSearchStorage">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import { m } from "@/store/yg/common/local";
import * as constant from "@/store/yg/common/constant";
import AbroadWaybillReportQuery from "./abroadWaybillReportQuery";
import financeAccountQuery from "./financeAccountQuery";
import receiveOrPayQuery from "./receiveOrPayQuery";

export default {
  components: {
    AbroadWaybillReportQuery,
    financeAccountQuery,
    receiveOrPayQuery
  },
  props: [],
  data() {
    return {
      statementTemplateId: null,
      statementSource: {},
      statementTemplates: [],
      abroadSearchStorageList: [],
      dialogVisible: false,
      templateName: "",
      booClose: false,
      searchStorageMap: {}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.statementSource = await ajax("initAbroadStatementCenterSource", {});
      this.initSearchStorage();
    },
    async initSearchStorage() {
      var params = {};
      params.isAbroad = 1;
      const data = await ajax("listSearchTemplates", params);
      if (data.code == 200) {
        this.abroadSearchStorageList = data.data2;
        this.searchStorageMap = data.data;
      }
    },
    selectDepart(item) {
      var info = JSON.parse(this.searchStorageMap[item].content);
      this.statementTemplateId = info.statementTemplateId;
      this.$refs.waybillForm.abroadWaybillReportQueryData =
        info.abroadWaybillQuery;
      this.$refs.receiveOrPayForm.receiveOrPayQueryData =
        info.receiveOrPayQuery;
      this.$refs.financeAccountForm.financeAccountQueryData =
        info.financeAccountQuery;
    },
    async closePop(item) {
      const data = await ajax("deleteSearchTemplates", {
        id: this.searchStorageMap[item].id
      });
      if (data.code == 200) {
        this.abroadSearchStorageList.splice(
          this.abroadSearchStorageList.indexOf(item),
          1
        );
        delete this.searchStorageMap[item];
      }
    },
    addPop() {
      if (this.abroadSearchStorageList.length > 5) {
        this.$message.error("保存太多,请删减后重新添加");
        return;
      }
      this.templateName = "";
      this.dialogVisible = true;
    },
    showCloseButton() {
      if (this.booClose) {
        this.booClose = false;
      } else {
        this.booClose = true;
      }
    },
    async saveSearchStorage() {
      if (!this.templateName) {
        this.$message.error("请输入模板名");
        return;
      }
      this.templateName = "H" + this.templateName;
      const statementQuery = {};
      statementQuery.statementTemplateId = this.statementTemplateId;
      statementQuery.abroadWaybillQuery = this.$refs.waybillForm.abroadWaybillReportQueryData;
      statementQuery.receiveOrPayQuery = this.$refs.receiveOrPayForm.receiveOrPayQueryData;
      statementQuery.financeAccountQuery = this.$refs.financeAccountForm.financeAccountQueryData;
      var params = {};
      params.templateName = this.templateName;
      params.isAbroad = 1;
      params.content = JSON.stringify(statementQuery);
      const data = await ajax("saveSearchTemplates", params);
      if (data.code == 200) {
        this.abroadSearchStorageList.push(this.templateName);
        this.searchStorageMap[this.templateName] = JSON.stringify(
          statementQuery
        );
        this.dialogVisible = false;
      } else {
        this.$message.error("新增失败");
      }
    },
    exportStatementDataFile() {
      const statementQuery = {};
      statementQuery.statementTemplateId = this.statementTemplateId;
      statementQuery.abroadWaybillQuery = this.$refs.waybillForm.abroadWaybillReportQueryData;
      statementQuery.receiveOrPayQuery = this.$refs.receiveOrPayForm.receiveOrPayQueryData;
      statementQuery.financeAccountQuery = this.$refs.financeAccountForm.financeAccountQueryData;
      console.log(statementQuery);
      this.createExportStatementDataFileTask(statementQuery);
    },
    async createExportStatementDataFileTask(params) {
      const data = await ajax("exportStatementDataFile", params);
      if (data.code == 200) {
        var path = (path = constant.FILE_SERVER + data.message);
        location.href =
          constant.API_SERVER +
          "/open/downloadFileByHttp?fileName=&path=" +
          path;
      } else {
        this.$message.error(m(data.message));
      }
    }
  }
};
</script>
<style scoped>
.el-divider--horizontal {
  margin: 12px 0;
}
</style>
